<template>
  <div class="page">
    <ElForm ref="form" :model="accountEx" class="form">
      <ElFormItem>
        <ElInput v-model="accountEx.username" ref="username">
          <template #prefix>
            <span>账号</span>
          </template>
        </ElInput>
      </ElFormItem>
      <ElFormItem>
        <ElInput v-model="accountEx.password">
          <template #prefix>
            <span>密码</span>
          </template>
        </ElInput>
      </ElFormItem>
      <ElButton @click="loginSystem()">登录</ElButton>
    </ElForm>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from
import { accountStore } from '@/stores/account'
// const store = accountStore()
export default {
  name: 'LoginPage',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      accountEx: {
        username: 'zhangsan001',
        password: '123456'
      }
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
    ...mapWritableState(accountStore, ['account', 'token'])
    // 等效于本页面中声明了两个计算属性 this.account,this.token
  },
  created() {},
  mounted() {
    // dom 操作  id/ref
    
    const username :any = this.$refs.username 
    console.log(username)
    username.focus();
  },
  methods: {
    // sampleM() {},
    // 登录按钮的本质是用明文的用户名密码 换取 暗文的token或cookie
    async loginSystem() {
      // console.log(this.account)
      try {
        const res = await axios({
          method: 'post',
          data: this.accountEx,
          url: 'http://localhost:7001/login'
        })
        console.log(res)
        console.log(res.data.token)
        // 将登录信息 载入 pinia响应式全局变量处存储
        // console.log(store.token)
        // store.token = res.data.token
        this.token = res.data.token
        // store.account = res.data.account
        this.account = res.data.account
        // this.$store.token = res.data.token;

        ElMessage.success('登录成功')
        await this.$router.push('/app')
      } catch (error: any) {
        ElNotification.warning('登录异常：' + error.response.data)
      }
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.page {
  display: flex;
  justify-content: center;
  align-items: center;
}
.form {
  width: 300px;
  height: 300px;
  padding: 10px;
  border: 1px solid saddlebrown;
}
</style>
